<h2>Why is this an issue?</h2>
<p>Offering the same experience with the mouse and the keyboard allow users to pick their preferred devices.</p>
<p>Additionally, users of assistive technology will also be able to browse the site even if they cannot use the mouse.</p>
<p>This rules detects the following issues:</p>
<ul>
  <li> when <code>onClick</code> is not accompanied by at least one of the following: <code>onKeyUp</code>, <code>onKeyDown</code>,
  <code>onKeyPress</code>. </li>
  <li> when <code>onmouseover</code>/<code>onmouseout</code> are not paired by <code>onfocus</code>/<code>onblur</code>. </li>
</ul>
<h2>How to fix it in JSX</h2>
<p>Add at least one of the following event handlers <code>onKeyUp</code>, <code>onKeyDown</code>, <code>onKeyPress</code> to the element when using
<code>onClick</code> event handler. Add corresponding event handlers <code>onfocus</code>/<code>onblur</code> to the element when using
<code>onmouseover</code>/<code>onmouseout</code> event handlers.</p>
<h3>Code examples</h3>
<h4>Noncompliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
&lt;div onClick={() =&gt; {}} /&gt;

&lt;div onMouseOver={ () =&gt; {}} }  /&gt;
</pre>
<h4>Compliant solution</h4>
<pre data-diff-id="1" data-diff-type="compliant">
&lt;div onClick={() =&gt; {}} onKeyDown={this.handleKeyDown} /&gt;

&lt;div onMouseOver={ () =&gt; {} } onFocus={ () =&gt; {} } /&gt;
</pre>
<h2>Exceptions</h2>
<p>This does not apply for interactive or hidden elements, eg. when using <code>aria-hidden="true"</code> attribute.</p>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y">eslint-plugin-jsx-a11y</a> - Rule <a
  href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/mouse-events-have-key-events.md">mouse-events-have-key-events</a>
  </li>
  <li> <a href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y">eslint-plugin-jsx-a11y</a> - Rule <a
  href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/click-events-have-key-events.md">click-events-have-key-events</a>
  </li>
  <li> SCR2 - <a href="https://www.w3.org/TR/WCAG20-TECHS/SCR2.html">Using redundant keyboard and mouse event handlers</a> </li>
  <li> G90 - <a href="https://www.w3.org/TR/WCAG20-TECHS/G90.html">Providing keyboard-triggered event handlers</a> </li>
</ul>
